<script lang="ts" setup>
import { tradeExtensionDataType } from '@/types/interface'
import { computed } from 'vue'
import Big from 'big.js'
interface Props {
  data: tradeExtensionDataType
  type?: 'other' | 'normal'
}
const props = withDefaults(defineProps<Props>(), { type: 'normal' })
const expensesTotal = computed(() => {
  return props.data.expenses.length >= 0
    ? props.data.expenses.reduce(
        (accumulator, currentValue) =>
          new Big(accumulator).plus(new Big(currentValue.value === '-' ? 0 : currentValue.value)),
        Big(0)
      )
    : Big(0)
})
</script>

<template>
  <div class="fee-breakdown-info flex-column">
    <div flex items-center justify-between class="text-[16px] color-black" v-if="type === 'normal'">
      <span>{{ data.pay[0].label }}</span>
      <span>{{ data.pay[0].value }}</span>
    </div>
    <div flex items-center v-else>
      <span>其他收费</span>
    </div>
    <div flex flex-col bg-hover rd-5 p-10 mt-10>
      <div v-for="(item, index) in data.rideInfo" :key="index + 1">
        <span>{{ item.label }}:</span>
        <span>{{ item.value }}</span>
      </div>
      <div v-for="(item, index) in data.expenses" :key="index + 1">
        <span>{{ item.label }}:</span>
        <span>{{ item.value }}元</span>
      </div>
      <el-divider />
      <div class="expenses-total">
        <span
          >总计: <span ml-5>{{ expensesTotal }}</span> 元</span
        >
      </div>
      <div v-for="(item, index) in data.deduction" :key="index + 2" class="color-warning-light">
        <span>{{ item.label }}</span>
        <span>{{ item.value }}</span>
      </div>
      <div v-for="(item, index) in data.rest" :key="index + 2" class="color-warning-light">
        <span>{{ item.label }}</span>
        <span>{{ item.value }}</span>
      </div>
      <el-divider />
      <div v-for="(item, index) in data.refund" :key="index + 2" class="color-danger">
        <span>{{ item.label }}</span>
        <span>{{ item.value }}</span>
      </div>
    </div>
  </div>
</template>

<style scoped lang="scss">
.fee-breakdown-info {
  font-family:
    PingFang SC,
    PingFang SC;
  font-size: 12px;
  color: #888888;
  line-height: 17px;
}
.fee-breakdown-info div {
  margin-bottom: 5px;
  width: 100%;
  display: flex;
  justify-content: space-between;
}
.fee-breakdown-info div:not(.expenses-total) {
  > span:first-child {
    margin-right: 20px;
  }
}
.expenses-total {
  color: #333333;
  justify-content: flex-end !important;
  align-items: center;
}
</style>
